<template>
  <div class="login-container">
    <div class="left-box">
      <img class="img" :src="require('@/assets/icon/login-bg.png')" />
    </div>
    <div class="square-box">
      <img class="img" :src="require('@/assets/icon/login-bg2.png')" />
    </div>
    <div class="right-box">
      <span class="icp">国ICP备2024000601号-2全能狮</span>

      <div class="form-box">
        <div class="title">您好，欢迎登录！</div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="loginForm" auto-complete="on">
          <el-form-item prop="username">
            <el-input clearable maxlength="11" class="el-input" ref="username" v-model="loginForm.username"
              placeholder="用户账号（手机号）" name="username" tabindex="1" auto-complete="on"></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input clearable class="el-input" ref="password" v-model="loginForm.password" show-password
              placeholder="用户密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin">
            </el-input>
          </el-form-item>

          <el-form-item prop="verification">
            <el-input type="number" oninput="if(value.length>6)value=value.slice(0,6)"
              onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
              onfocus="this.removeAttribute('readonly');" auto-complete="off" class="el-input" ref="verification"
              v-model="loginForm.verification" placeholder="短信验证码" name="verification" tabindex="2" clearable
              @keyup.enter.native="handleLogin">
              <el-button class="btn" slot="append" :style="disGetCode ? 'opacity: .6;' : ''" @click="getCode"
                :disabled="disGetCode">{{ time == 60 ? getCodeName : time + "S" }}</el-button>
            </el-input>
          </el-form-item>

          <el-button :loading="loading" type="primary" style="width: 330px; height: 45px; background-color: #3B75FF;"
            @click.native.prevent="handleLogin">登录
          </el-button>

          <!-- <div class="tips" :style="'margin-top:20px;'">
            <span>忘记密码?</span>
          </div> -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import adminApi from '@/api/adminApi'
import "swiper/dist/css/swiper.min.css";

export default {
  name: "Login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入正确手机号"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("请输入正确用户密码"));
      } else {
        callback();
      }
    };
    const verification = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    return {
      time: 60,
      getCodeName: "验证码",
      disGetCode: false,
      list: [{
        img: require("@/assets/icon/login-bg.png"),
        title: "",
      },
        // {
        //   img: 'https://gd-filems-fat.my-static.dancf.com/saas/f2619w/eeb4120e-fb6e-4f89-90fc-a0872154ac3f905.png',
        //   title: '提升市场转化效率',
        //   detail: '高效品牌管理，一键调用品牌LOGO/颜色/字体，节日推广/实时热点跟进快人一步，为市场运营人员充分赋能'
        // }
      ],
      loginForm: {
        username: "",
        password: "",
        verification: "",
      },
      loginRules: {
        username: [{
          required: true,
          trigger: "blur",
          validator: validateUsername
        },],
        password: [{
          required: true,
          trigger: "blur",
          validator: validatePassword
        },],
        verification: [{
          required: true,
          trigger: "blur",
          validator: verification
        },],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
    };
  },
  mounted() {
    console.log(this.$store.state.permission)
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    // 获取验证码
    getCode() {
      if (
        !this.loginForm.username ||
        !/^1[3456789]\d{9}$/.test(this.loginForm.username)
      ) {
        this.$message({
          type: "warning",
          message: "请输入正确手机号",
        });
        return;
      }
      this.disGetCode = true;
      this.sendSms(this.loginForm.username);
    },
    sendSms(phone) {
      adminApi.sendCode({
        phone
      })
        .then((res) => {
          console.log(res, "获取验证码");
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "发送成功!",
            });
            let setInter = setInterval(() => {
              if (this.time == 1) {
                clearInterval(setInter);
                this.time = 60;
                this.getCodeName = "重新获取";
                this.disGetCode = false;
              } else {
                this.time = this.time - 1;
              }
            }, 1000);
          } else {
            this.disGetCode = false;
            this.$message({
              type: "warning",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.disGetCode = false;
          this.$message({
            type: "warning",
            message: err.message,
          });
        });
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              this.$router.push({
                path: this.redirect || "./"
              });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};

</script>

<style lang="scss" src="./index.scss" scoped></style>
